import React,{useState} from 'react'
import "./index.less"
import {Menu,Dropdown,Button} from 'antd'
import { DownOutlined } from '@ant-design/icons';
const {SubMenu}=Menu

export default function Dropdown_demo(props){
    return (
        <div className="Dropdown_demo">
            <h1>dropdown下拉菜单</h1>
            <Dropdown overlay={Menus()}>
                <a className="ant-dropdown-link" onClick={e=>e.preventDefault()}>鼠标放上来<DownOutlined/></a>
            </Dropdown>
            <hr/>
            <Dropdown_demo2/>
            <hr/>
            <Dropdown_demo3/>
            <hr/>
            <Dropdown_demo4/>
            <hr/>
            <RightMenu/>
            <hr/>
        </div>
    )
}
function Dropdown_demo2(){
    return (
        <div className="Dropdown_demo2">
            <h1>位置和点击触发</h1>
            <Dropdown overlay={Menus()} placement="bottomLeft" arrow>
                <Button>左下</Button>
            </Dropdown>
            <Dropdown overlay={Menus()} placement="bottomCenter" arrow>
                <Button>中下</Button>
            </Dropdown>
            <br/><br/>
            <Dropdown overlay={Menus()} placement="topLeft">
                <Button>左上</Button>
            </Dropdown>
            <Dropdown overlay={Menus()} placement="topCenter">
                <Button>中上</Button>
            </Dropdown>
            <Dropdown overlay={Menus()} trigger={['click']}>
                <Button>点击打开</Button>
            </Dropdown>
            <Dropdown overlay={Menus2()}>
                <Button>点击选项触发事件</Button>
            </Dropdown>
        </div>
    )
}
function Dropdown_demo3(){
    return (
        <div>
            <h1>多级菜单</h1>
            <Dropdown overlay={Menus3()}>
                <Button>多级菜单</Button>
            </Dropdown>
        </div>
    )
}
//自定义隐藏显示
class Dropdown_demo4 extends React.Component{
    state={
        visible:false,//是否展示选项
    }
    menu=(
        <Menu>
            <Menu.Item>111</Menu.Item>
            <Menu.Item>222</Menu.Item>
        </Menu>
    )
    VisibleChange(flag){
        console.log(flag)
        this.setState({visible:flag})
    }
    render(){
        const {visible}=this.state
        return (
            <Dropdown overlay={this.menu} visible={visible} onVisibleChange={this.VisibleChange.bind(this)}>
                <Button>点我</Button>
            </Dropdown>
        )
    }
}
//鼠标右键触发菜单
function RightMenu(){
    return (
        <Dropdown overlay={Menus} trigger={['contextMenu']}>
            <div className="rightDiv">右键点击我</div>
        </Dropdown>
    )
}

function Menus(){
    return (
        <Menu>
            <Menu.Item>111</Menu.Item>
            <Menu.Item>222</Menu.Item>
            <Menu.Item>333</Menu.Item>
            <Menu.Divider/>{/**分割线 */}
            <Menu.Item danger>红色的</Menu.Item>
            <Menu.Item disabled>不可用</Menu.Item>
        </Menu>
    )
}

function Menus2(){
    return (
        <Menu onClick={value=>{
            console.log(value.key)
        }}>
            <Menu.Item key="1">1</Menu.Item>
            <Menu.Item key="2">2</Menu.Item>
        </Menu>
    )
}
function Menus3(){
    return (
        <Menu>
            <Menu.Item>111</Menu.Item>
            <Menu.ItemGroup title="分类1">
                <Menu.Item>222</Menu.Item>
                <Menu.Item>333</Menu.Item>
            </Menu.ItemGroup>
            <SubMenu title="二级菜单">
                <Menu.Item>444</Menu.Item>
                <Menu.Item>555</Menu.Item>
            </SubMenu>
        </Menu>
    )
}